<template>
  <div :class="{ 'xingyuv-login': true }" class="relative h-full min-h-full w-full overflow-hidden px-4">
    <div class="relative mx-auto h-full py-2 container sm:px-10">
      <div class="h-full flex">
        <div class="w-6/12 flex flex-col">
          <div class="xingyuv-app-logo__title">甬能云后台管理系统</div>
          <div class="flex-auto flex flex-col justify-center">
            <img alt="甬能云后台管理系统" src="@/assets/svg/login-box-bg.svg" class="-enter-x w-1/2 -mt-16">
            <div class="-enter-x mt-10 font-medium text-white">
              <span class="mt-4 inline-block text-3xl">开箱即用的中后台管理系统</span>
            </div>
            <div class="-enter-x mt-5 font-normal text-white dark:text-gray-500">
              输入您的个人详细信息开始使用！
            </div>
          </div>
        </div>
        <div class="w-6/12 flex flex-col justify-center">
          <h2 class="font-bold">登录</h2>
          <Form ref="formRef" class="enter-x p-4" :model="formData" :rules="formRules" @keypress.enter="handleLogin">
            <FormItem name="username" class="enter-x">
              <Input v-model:value="formData.username" size="large" :placeholder="'请输入账号'" class="fix-auto-fill" />
            </FormItem>
            <FormItem name="password" class="enter-x">
              <InputPassword v-model:value="formData.password" size="large" visibility-toggle placeholder="请输入密码" class="fix-auto-fill"/>
            </FormItem>
            <FormItem class="enter-x">
              <Button type="primary" size="large" block :loading="loading" @click="handleLogin">登录</Button>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import { Button, Form, Input, InputPassword } from 'ant-design-vue'
import { useFormValid } from './useLogin'
const FormItem = Form.Item
import { useUserStore } from '@/store/modules/user'

const formRef = ref()
const loading = ref(false)
const { validForm } = useFormValid(formRef)
const userStore = useUserStore()
const formData = reactive({
  username: 'u1',
  password: '123',
})
const formRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'change' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'change' },
  ],
}
const handleLogin = async () => {
  const data = await validForm()
  if (!data)
    return
  try {
    loading.value = true
    await userStore.login({
      password: data.password,
      username: data.username,
    })
  }
  catch (error) {
    console.error(error, '登录失败')
  }
  finally {
    console.log(loading.value, '登录')
    loading.value = false
  }
}
</script>

<style lang="less" scoped>
.xingyuv-login {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background: url('@/assets/svg/login-bg.svg') no-repeat;
    background-size: auto 100%;
    background-position: 100% center;
  }
  .xingyuv-app-logo__title {
    padding-top: 12px;
    height: 80px;
    line-height: 80px;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
  }
}
</style>
